<template>
  <div>
    <div class="item c">
      <div class="flex tit">{{ title }}</div>
      <div class="flex input">
        <div class="c">
          <el-upload
            class="upload-box"
            :action="url"
            name="file"
            :multiple="false"
            :data="uploadData"
            :limit="1"
            :on-success="handleSuccess"
            :on-error="uploadError"
          >
            <i class="el-icon-plus avatar-uploader-icon unUpload" v-if="!imgUrl"></i>
            <img
              :src="imgUrl"
              alt
              class="bg-contain rounded uploadImg min-h-100 max-h-44"
              :style="imgStyle"
              v-else
            />
            <i class="delete el-icon-close flex-c" v-if="imgUrl != ''" @click.stop="removeImg"></i>
          </el-upload>
        </div>
        <div class="flex tips" v-if="size && small">
          <br />
          <span>建议尺寸: {{ size }}</span>
        </div>
      </div>
    </div>
    <div class="flex-c tips2" v-if="size">
      <span>建议尺寸: {{ size }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "setImgAttr",
  props: {
    moduleData: {
      //要编辑图片的模块数据
      type: Object,
      required: true,
      default: {},
    },
    title: {
      //图片标题
      type: String,
      default: "上传图片",
    },
    size: {
      //建议上传的图片尺寸
      type: String,
      default: "",
    },
    small: {
      //小图模式，用于icon
      type: Boolean,
      default: false,
    },
    isBgImg: {
      //要上传的图片是否是背景图片
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      imgUrl: "",
      url: "",
      uploadData: {
        Module: "HomeCustom",
      },
    };
  },
  created() {
    this.url = process.env.VUE_APP_BASE_URL + '/uploadImg';
    this.imgUrl = this.isBgImg ? this.moduleData.bgImg : this.moduleData.url;
  },
  computed: {
    imgStyle() {
      return this.small ? "width: 100px;" : "width: 250px;";
    },
  },
  methods: {
    //删除文件
    deleFile() {
      this.isBgImg ? (this.moduleData.bgImg = "") : (this.moduleData.url = "");
    },
    // 上传失败
    uploadError() {
      this.$message.error("图片上传失败,请重新上传");
    },
    // 上传成功
    handleSuccess(file, fileList) {
      const { data, msg, code } = file;
      if (code == 1) {
        if (this.isBgImg) {
          this.moduleData.bgImg = data.url;
          this.moduleData.imgType = 3;
          this.imgUrl = data.url;
        } else {
          this.moduleData.url = data.url;
          this.moduleData.imgType = 3;
          this.imgUrl = data.url;
        }
      } else {
        if (this.isBgImg) {
          this.moduleData.bgImg = "";
        } else {
          this.moduleData.url = "";
        }
        this.$message.error(msg);
      }
    },
    // 点击删除
    removeImg() {
      this.imgUrl = ''
      if (this.isBgImg) {
        this.moduleData.bgImg = "";
      } else {
        this.moduleData.url = "";
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.unUpload {
  margin: 0 10px;
  border: 1px dashed #8c939d;
  border-radius: 8px;
  line-height: 98px;
  color: #8c939d;
  width: 148px;
  height: 98px;
  font-size: 30px;
}
.uploadImg {
  margin: 0 10px;
  min-height: 50px;
  background-color: #f7f8fa;
}
.tit {
  align-items: flex-start;
  height: 100%;
  white-space: nowrap;
}
.tips,
.tips2 {
  color: #718093;
  font-size: 12px;
}
.tips2 {
  position: relative;
  width: 100%;
  top: -10px;
}
.upload-box {
  position: relative;
}
.delete {
  position: absolute;
  right: 10px;
  top: 0;
  width: 25px;
  height: 25px;
  color: #fff;
  font-size: 16px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0px 0 0 50%;
  z-index: 10;
}
</style>
